<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew :title="title"></pageHeaderNew>
    </template>
    <div style="margin-bottom: 20px; font-size: 18px">
      选择登录背景图片：
      <!-- 幻灯片轮播背景图
      <a-switch />
      <a-button>预览</a-button> -->
    </div>
    <div class="bg-imgs">
      <a-space wrap>
        <!-- <div
          class="img-list"
          v-for="img in fileList"
          :key="img.id"
          @click="selectImg(img.fileId)"
        >
          <img :src="img.fileUrl" style="height: 150px; width: 250px" />
        </div> -->
        <UploadFile
          class="file"
          ref="uploadRef"
          v-model:fileList="fileList"
          :draggable="false"
          tip="请上传JPG、JPEG、PNG"
          :fileTypeList="fileTypeList"
          :userId="userId"
          :type="2"
          :listType="'picture-card'"
          :autoUpload="true"
          @uploadOk="uploadOk"
          :showRemoveButton="false"
          :showPreviewButton="false"
          :imgSelectedId="bgImgSelected"
          @setBgImg="selectImg"
          @delBgImg="delImg"
          :hiddenMask="true"
          :loginBgSetting="true"
        />
      </a-space>
    </div>
    <div style="margin-bottom: 20px; font-size: 18px">登录表单位置：</div>
    <div class="bg-imgs">
      <a-radio-group>
        <a-radio value="A">靠左</a-radio>
        <a-radio value="B">居中</a-radio>
        <a-radio value="C">靠右</a-radio>
      </a-radio-group>
    </div>
  </ContentCard>
</template>
<script setup lang="ts">
import {
  getSysSetting,
  addLoginBgImg,
  setLoginBgImg,
  delLoginBgImg
} from '@/apis/platform/index';
import type { LoginBgImg } from '@/apis/platform/type';
import { cloneDeep } from 'lodash';

const title = '登录页主题';
const loginBgImgParams = reactive<LoginBgImg>({
  clientDomainName: '',
  loginBackgroundImage: ''
});
onMounted(() => {
  const url = window.location.hostname;
  loginBgImgParams.clientDomainName = url.split('.')[0];
  getSys();
});
const bgImgSelected = ref(0);
const getSys = async () => {
  const res = await getSysSetting(loginBgImgParams.clientDomainName);
  bgImgSelected.value = res.is_use_back_id;
  fileList.value = [];
  res.list.forEach((item: any) => {
    const {
      id: fileId,
      loginBackgroundImage: fileUrl,
      clientDomainName: fileName
    } = item;
    fileList.value.push({ fileId, fileUrl, fileName });
  });
  setUploadList();
};

const fileList = ref<any[]>([]);
const fileTypeList = ['.png', '.jpeg', '.jpg'];
const userId = 106;
const uploadRef = ref();
/**
 * 添加登录页背景图片
 * @param file
 */
const uploadOk = async (file: any) => {
  loginBgImgParams.loginBackgroundImage = file.response.DownloadPath;
  await addLoginBgImg(loginBgImgParams);
  await getSys();
};
const selectImg = async (id: number) => {
  await setLoginBgImg({ id });
  getSys();
};
const uploadList = ref();
const setUploadList = () => {
  uploadList.value = [];
  fileList.value.forEach((item) => {
    const { fileId, fileUrl, fileName, uid } = item;
    uploadList.value.push({
      name: fileName,
      status: 'done',
      url: fileUrl,
      uuid: uid,
      response: { fileId, fileUrl, fileName }
    });
  });
  uploadRef.value.uploadList = uploadList.value;
};
const delImg = async (id: number) => {
  await delLoginBgImg({ ids: [id] });
  getSys();
};
</script>
<style lang="less" scoped>
.bg-imgs {
  display: flex;
  flex-wrap: wrap;
  .img-list {
    border: 1px solid #eee;
    padding: 5px;
    &:hover {
      border-color: aqua;
    }
  }
  .bg-img-selected {
    border-color: aqua;
  }
}
.img-border {
  border: 1px solid #ea0e0e;
  border-radius: 2px;
  width: 250px;
  &:hover {
    border-color: aqua;
  }
}
</style>
